<template>
	<view>
		<!-- 自定义顶部 -->
		<u-navbar style="background-color: #007AFF;" :is-back="false" title="优惠券">
			<view class="slot-wrap">
				<u-icon name="arrow-left" style="margin-left: 10rpx;" @tap="getBack" size="45"></u-icon>
				<view class="coupons_left_line"></view>
				<u-icon name="home" @tap="home"  size="40"></u-icon>
			</view>
		</u-navbar>
		<!-- end -->
		<!-- tab -->
		<view class="coupons_tab">
			<u-tabs-swiper 
				:list="list" 
				ref="uTabs"
				active-color="#333333" 
				@change="tabsChange"
				:current="current"
				:bar-style="barStyle"></u-tabs-swiper>
		</view>
		<view class="width">
			<swiper style="height:100vh; " 
				:current="swiperCurrent" 
				@transition="transition" 
				@animationfinish="animationfinish">
				<swiper-item class="swiper-item"  >
					<scroll-view scroll-y style="height: 800rpx;width: 100%;" @scrolltolower="onreachBottom">
						<!-- 有优惠券 -->
						<view v-if="tabs.length>0">
							<view class=" tabs"  v-for="(item,index) in tabs" :key="index">
								<image class="tabs_bei" src="../../../static/mine/ju.png"></image>
								<view class="dis">
									<view class="tabs_left">
										<view style="margin-top: 35rpx;">￥<text style="font-size: 50rpx;">5</text></view>
										<view>满减卷</view>
									</view>
									<view class="dis tabs_right">
										<view>
											<view class="color33" style="font-size: 34rpx;">{{item.name}}</view>
											<view class="marTop45" style="color:#999999;">有效期至：{{item.time}}</view>
										</view>
										<view>
											<image class="tabs_wei" src="../../../static/mine/wei.png"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
						<!-- 没有优惠券 -->
						<view class="coupons_que" v-else >
							<image  src="../../../static/mine/que.png"></image>
							<text>当前暂无可用优惠券</text>
						</view>	
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item"  >
					<scroll-view scroll-y style="height: 800rpx;width: 100%;" @scrolltolower="onreachBottom">
						<!-- 有优惠券 -->
						<view v-if="tabs.length>0">
							<view class=" tabs"  v-for="(item,index) in tabs" :key="index">
								<image class="tabs_bei" src="../../../static/mine/ju1.png"></image>
								<view class="dis">
									<view class="tabs_left">
										<view style="margin-top: 35rpx;">￥<text style="font-size: 50rpx;">5</text></view>
										<view>满减卷</view>
									</view>
									<view class="dis tabs_right">
										<view>
											<view class="color33" style="font-size: 34rpx;">{{item.name}}</view>
											<view class="marTop45" style="color:#999999;">有效期至：{{item.time}}</view>
										</view>
										<view>
											<image class="tabs_wei" src="../../../static/mine/yis.png"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
						<!-- 没有优惠券 -->
						<view class="coupons_que" v-else >
							<image  src="../../../static/mine/que.png"></image>
							<text>当前暂无可用优惠券</text>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item"  >
					<scroll-view scroll-y style="height: 800rpx;width: 100%;" @scrolltolower="onreachBottom">
						<!-- 有优惠券 -->
						<view v-if="tabs.length>0">
							<view class=" tabs"  v-for="(item,index) in tabs" :key="index">
								<image class="tabs_bei" src="../../../static/mine/ju1.png"></image>
								<view class="dis">
									<view class="tabs_left">
										<view style="margin-top: 35rpx;">￥<text style="font-size: 50rpx;">5</text></view>
										<view>满减卷</view>
									</view>
									<view class="dis tabs_right">
										<view>
											<view class="color33" style="font-size: 34rpx;">{{item.name}}</view>
											<view class="marTop45" style="color:#999999;">有效期至：{{item.time}}</view>
										</view>
										<view>
											<image class="tabs_wei" src="../../../static/mine/gqi.png"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
						<!-- 没有优惠券 -->
						<view class="coupons_que" v-else >
							<image  src="../../../static/mine/que.png"></image>
							<text>当前暂无可用优惠券</text>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{name:'未使用'},
					{name:'已使用'},
					{name:'已过期'}
				],
				//tab滑块背景色
				barStyle:{backgroundColor :'#FF6600'},
				swiperCurrent:0,
				current:0,
				tabs:[
					{
						name:'新人注册',
						time:'2021-01-06',
						status:0,
						price:'5'
					},
					{
						name:'新人注册',
						time:'2021-01-06',
						status:0,
						price:'5'
					},
					{
						name:'新人注册',
						time:'2021-01-06',
						status:0,
						price:'5'
					}
				],
				swiperHeight:0
			}
		},
		onLoad() {
			
		},
		methods: {
			//返回首页
			home(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			//返回上一页
			getBack(){
				this.$mHelper.back(1)
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
				
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.tabs{
		position: relative;
		width: 100%;
		height: 190rpx;
		margin-top: 20rpx;
		.tabs_right{
			width: 72%;
			padding: 25rpx;
			display: flex;
			align-items: center;
			position: relative;
			position: absolute;
			top: 0;
			right: 15rpx;
		}
		.tabs_bei{
			width: 100%;
			height: 180rpx;
		}
		.tabs_wei{
			width: 104rpx;
			height: 88rpx;
			position: absolute;
			right: 0;
			top: 55rpx;
		}
	}
	.tabs_left{
		color: #FFFFFF;
		text-align: center;
		width: 180rpx;
		height: 180rpx;
		position: absolute;
		top: 0;
	}
	.coupons_que{
		width: 280rpx;
		color: #999999;
		text-align: center;
		margin: 80rpx auto;
		image{
			width: 100%;
			height: 280rpx;
		}
	}
	.coupons_tab{
		box-shadow: 0 4px 8px 0 rgba(121, 121, 121, 0.2);
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.coupons_left_line{
		height: 40rpx; border-left: 1rpx solid #cccccc; margin-left: 10rpx;margin-right: 20rpx;
	}
	.home{
		width: 45rpx;
		height: 45rpx;
	}
	.slot-wrap {
			display: flex;
			align-items: center;
			/* 如果您想让slot内容占满整个导航栏的宽度 */
			/* flex: 1; */
			/* 如果您想让slot内容与导航栏左右有空隙 */
			/* padding: 0 30rpx; */
	}
</style>
